<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .active {
        background: pink;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <!-- v-if、v-show -->
      <div v-if="div1">优秀</div>
      <div v-else-if="div2">良好</div>
      <div v-else-if="div3">一般</div>
      <div v-else>不及格</div>
      <div v-show="flag">v-show</div>

      <!-- v-for -->
      <dl>
        <dt>水果列表</dt>
        <!-- <dd v-for='(item,index) in fruits'>{{item + '...' + index}}</dd> -->
        <dd
          v-for="(item,index) in myFruits"
          :k="item.id"
          :class="{active: index%2 == 0}"
        >
          {{ `${index+1} -- ${item.ename} -- ${item.cname}`}}
        </dd>
      </dl>
    </div>
    <script src="js/vue.js"></script>
    <script>
      const vue = new Vue({
        el: "#app ",
        data: {
          score: 50,
          flag: false,
          fruits: ["苹果", "橙子", "香蕉", "桔子"],
          myFruits: [
            {
              id: "1",
              ename: "apple",
              cname: "苹果",
            },
            {
              id: "2",
              ename: "orange",
              cname: "橙子",
            },
            {
              id: "3",
              ename: "banana",
              cname: "香蕉",
            },
          ],
        },
        computed: {
          div1() {
            return this.score >= 90;
          },
          div2() {
            return 80 <= this.score && this.score < 90;
          },
          div3() {
            return 60 <= this.score && this.score < 80;
          },
        },
      });
    </script>
  </body>
</html>
